<template  xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <!-- 左边 -->
    <div class="left">
      <div class="put">
        <el-input placeholder="请输入机器人名称" v-model="robot_name" @change="getRobotName($event)" prefix-icon="el-icon-search"
          clearable></el-input>
      </div>
      <div class="table">
        <el-table :data="robotList" @row-click="handleSelectionChange" height="100%"
          :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
          :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
          :row-style="{ height: '40px', background: '#000224', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
          :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
          <el-table-column prop="robot_num" label="编号" width="90px">
          </el-table-column>
          <el-table-column prop="robot_name" label="名称" width="80px">
          </el-table-column>
          <el-table-column prop="robot_state" label="状态" width="70px">
            <template slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.robot_state === 0"
                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
              <i class="el-icon-success" v-if="scope.row.robot_state === 1"
                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-bottom">
        <el-table :data="plcList" height="100%" :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
          :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
          :row-style="{ height: '40px', background: '#000224', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
          :cell-style="{ 'padding-right': '30px', width: '100%' }">
          <el-table-column prop="plc_name" label="PLC柜名称" width="90px">
          </el-table-column>
          <el-table-column prop="plc_num" label="PLC柜号" width="80px ">
            <template slot-scope="scope">
              <div style="fontSize:'12px';display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;">
                <div v-if="scope.$index + 1 == 1"
                  style=" display: flex; justify-content: center;align-items: center;  width:14px; background-color:#a64317; height: 14px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
                <div v-if="scope.$index + 1 == 2"
                  style=" display: flex; justify-content: center;align-items: center;  width:14px; background-color:#a67c17; height: 14px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
                <div v-if="scope.$index + 1 == 3"
                  style=" display: flex; justify-content: center;align-items: center;  width:14px; background-color:#9aa617; height: 14px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
                <div v-if="scope.$index + 1 >= 4"
                  style=" display: flex; justify-content: center;align-items: center;  width:14px; background-color:#64a617; height: 14px; border-radius: 9px; color: #fff; margin: 2px 3px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="状态" width="70px">
            <template slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.plc_state === 0"
                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
              <i class="el-icon-success" v-if="scope.row.plc_state === 1"
                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <div><!--<div class="right-robot">-->
        <p style=" font-size: 22px;font-family: Source Han Sans CN;font-weight: bold;color: #E9E9E9;display: flex;justify-content: center;align-items: center;"
          id="robotitle">机器人操作面板</p>
      </div>
      <div class="right-bottom">
        <!-- 显示参数 -->
        <div class="right-center1">
          <p>显示参数</p>
          <span></span>
          <div class="right-conter">
            <div class="centerBox">
              <div class="centerBox1">
                <p>电机1状态</p>
                <p>{{ dj1 }}</p>
              </div>
              <div class="centerBox1">
                <p>现场湿度</p>
                <p>{{ xcsd }}</p>
              </div>
              <div class="centerBox1">
                <p>甲烷</p>
                <p>{{ jw }}</p>
              </div>
              <div class="centerBox1">
                <p>格栅孔数设定</p>
                <p style="color:#e85e09">{{ jcgssl }}</p>
              </div>
              <div class="centerBox1">
                <p>格栅数量设定</p>
                <p style="color:#e85e09">{{ gswl }}</p>
              </div>
            </div>
            <div class="centerBox">
              <div class="centerBox1">
                <p>电机2状态</p>
                <p>{{ dj2 }}</p>
              </div>
              <div class="centerBox1">
                <p>电机转速</p>
                <p style="color:#e85e09">{{ djzs }}</p>
              </div>
              <div class="centerBox1">
                <p>氧气</p>
                <p>{{ yq }}</p>
              </div>
              <div class="centerBox1">
                <p>机器人方向</p>
                <p style="color: #d0a005;" v-if="jqrfx=='后退'">{{ jqrfx }}</p>
                <p style="color: #e85e09;" v-else-if="jqrfx=='无'">{{ jqrfx }}</p>
                <p style="color: #2da14e;" v-else >{{ jqrfx }}</p>
              </div>
              <div class="centerBox1">
                <p>电池电量</p>
                <p style="color: #30a96a;" v-if="dcdl > 80">{{ dcdl }}%</p>
                <p style="color: #46cc51;" v-else-if="dcdl > 70">{{ dcdl }}%</p>
                <p style="color: #9eee25;" v-else-if="dcdl > 60">{{ dcdl }}%</p>
                <p style="color: #9eee25;" v-else-if="dcdl > 50">{{ dcdl }}%</p>
                <p style="color: #a5f1a6;" v-else-if="dcdl > 30">{{ dcdl }}%</p>
                <p style="color: #e19532;" v-else-if="dcdl > 20">{{ dcdl }}%</p>
                <p style="color: #bad0f5;" v-else-if="dcdl=='无'">{{ dcdl }}</p>
                <p style="color: #de5c23;" v-else>{{ dcdl }}%</p>
              </div>
            </div>
            <div class="centerBox">
              <div class="centerBox1">
                <p>1#摄像头状态</p>
                <p>{{ sxt1 }}</p>
              </div>
              <div class="centerBox1">
                <p>当前巡检点位置</p>
                <p>{{ dqjcdwz }}</p>
              </div>
              <div class="centerBox1">
                <p>硫化氢</p>
                <p>{{ lhq }}</p>
              </div>
              <div class="centerBox1">
                <p>电池状态</p>
                <p style="color: #96e81a;" v-if="dczt=='充电'">{{ dczt }}</p>
                <p v-else-if="dczt=='无'">{{ dczt }}</p>
                <p style="color: #e19532;" v-else >{{ dczt }}</p>
              </div>
              <div class="centerBox1">
                <p>轨道总长度</p>
                <p style="color:#e85e09">{{ gdzcd }}</p>
              </div>
            </div>
            <div class="centerBox">
              <div class="centerBox1">
                <p>2#摄像头状态</p>
                <p>{{ sxt2 }}</p>
              </div>
              <div class="centerBox1">
                <p>电机温度</p>
                <p style="color: #ee1c22;" v-if="djwd > 90">{{ djwd }}°C</p>
                <p style="color: #9eee25;" v-else-if="djwd > 60">{{ djwd }}°C</p>
                <p style="color: #46cc51;" v-else-if="djwd > 40">{{ djwd }}°C</p>
                <p style="color: #29ab33;" v-else-if="djwd > 30">{{ djwd }}°C</p>
                <p style="color: #30a96a;" v-else-if="djwd > 20">{{ djwd }}°C</p>
                <p style="color: #bad0f5;" v-else-if="djwd=='无'">{{ djwd }}</p>
                <p style="color: #0b853c;" v-else>{{ djwd }}°C</p>
              </div>
              <div class="centerBox1">
                <p>机器人速度设定</p>
                <p style="color:#e85e09">{{ jqrsd }}</p>
              </div>
              <div class="centerBox1">
                <p>电池1温度</p>
                <p>{{ dc1wd }}</p>
              </div>
              <div class="centerBox1">
                <p>机器人模式</p>
                <p style="color:#e85e09">{{ jqrms }}</p>
              </div>
            </div>
            <div class="centerBox">
              <div class="centerBox1">
                <p>照明灯1状态</p>
                <p>{{ zmd1 }}</p>
              </div>
              <div class="centerBox1">
                <p>目标位置设定</p>
                <p>{{ mbwz }}</p>
              </div>
              <div class="centerBox1">
                <p>现场温度</p>
                <p>{{ xcwd }}</p>
              </div>
              <div class="centerBox1">
                <p>复位状态码</p>
                <p>{{ fwztm }}</p>
              </div>
              <div class="centerBox1">
                <p>机器故障码</p>
                <p>{{ jqgzm }}</p>
              </div>
            </div>
            <div class="centerBox">
              <div class="centerBox1">
                <p>照明灯2状态</p>
                <p>{{ zmd2 }}</p>
              </div>
              <div class="centerBox1">
                <p>运行灯</p>
                <p>{{ yxd }}</p>
              </div>
              <div class="centerBox1">
                <p>氨气</p>
                <p>{{ aq }}</p>
              </div>
              <div class="centerBox1">
                <p>电池电压</p>
                <p style="color: #30a96a;" v-if="dcdy > 70">{{ dcdy }}V</p>
                <p style="color: #29ab33;" v-else-if="dcdy > 50">{{ dcdy }}V</p>
                <p style="color: #46cc51;" v-else-if="dcdy > 30">{{ dcdy }}V</p>
                <p style="color: #9eee25;" v-else-if="dcdy > 20">{{ dcdy }}V</p>
                <p style="color: #a5f1a6;" v-else-if="dcdy > 15">{{ dcdy }}V</p>
                <p style="color: #bad0f5;" v-else-if="dcdy=='无'">{{ dcdy }}</p>
                <p style="color: #e19532;" v-else>{{ dcdy }}V</p>
              </div>
              <div class="centerBox1">
                <p>实时位移</p>
                <p>{{ sswy }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 公共操作 -->
        <div class="Common-operation">
          <p>公共操作</p>
          <span></span>
          <div>
            <div class="Common-topBox">
              <div class="Common-topBox1">
                <p contenteditable="true" id="zcdid">0</p>
                <p>m</p>
                <el-button plain @click="zcdsz()">总长设置</el-button>
              </div>
              <div class="Common-topBox2">
                <p contenteditable="true" id="gsslid">0</p>
                <p>个</p>
                <el-button @click="gszlsz()">栅格数量</el-button>
              </div>
              <div class="Common-topBox3">
                <p contenteditable="true" id="gsksid">0</p>
                <p>个</p>
                <el-button @click="gsks()">栅格孔数</el-button>
              </div>
              <el-button class="robotStop" @click="jqrzt">机器人(暂停)</el-button>
              <el-button class="robotStop1" @click="jqrdd()">机器人(断电)</el-button>
            </div>
            <div class="Common-botmBox">
              <div class="Common-botmBox1">
                <p>模式 <!--<i class="el-icon-arrow-right"></i>--></p>
                <p></p>
              </div>
              <div class="Operation-buttonBox" @click="jqrmsF('1')">
                <p>手动模式</p>
                <el-button size="mini" circle></el-button>
              </div>
              <div class="Operation-buttonBox" @click="jqrmsF('2')">
                <p>自动模式</p>
                <el-button size="mini" circle style="
                                            background: linear-gradient(227deg, #0F947C, #10DAB2);"></el-button>
              </div>
              <div class="Operation-buttonBox" @click="jqrzymsF('3')">
                <p>一键返航</p>
                <el-button size="mini" circle style="
                                            background: linear-gradient(227deg, #337F17, #3CA813);"></el-button>
              </div>
              <div class="Operation-buttonBox" @click="jqrzymsF('0')" v-hasPermi="['robot:kzmbzyms:view']">
                <p>自由模式</p>
                <el-button size="mini" circle style="
                                            background: linear-gradient(227deg, #C45016, #F58614);"></el-button>
              </div>
              <div class="Operation-buttonBox1">
                <el-dropdown @command="djzcfun">
                  <el-button type="primary" size="min" style="width: 80px;
                                          background: #0F1A43 !important;
                                          border: 2px solid #54619D;
                                          border-radius: 10px;
                                          font-size: 10px;
                                          color: #C1C1C1;
                                          display: flex;
                                          justify-content: center;
                                          align-items: center;
                                          ">
                    {{ djcz }}<i class="el-icon-arrow-down"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="打开操作">打开操作</el-dropdown-item>
                    <el-dropdown-item command="打开设备">打开设备</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="Operation-buttonBox1">
                <el-dropdown @command="sxtczfun">
                  <el-button type="primary" size="min" style="width: 80px;
                                          background: #0F1A43 !important;
                                          border: 2px solid #54619D;
                                          border-radius: 10px;
                                          font-size: 10px;
                                          color: #C1C1C1;
                                          display: flex;
                                          justify-content: center;
                                          align-items: center;
                                          ">
                    {{ sxtcz }}<i class="el-icon-arrow-down"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="关闭操作">关闭操作</el-dropdown-item>
                    <el-dropdown-item command="关闭设备">关闭设备</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>

        <!-- 手动模式 -->
        <div class="Manual-mode">
          <p>手动模式</p>
          <span></span>
          <div class="Manual-topBox">
            <div class="Manual-topBox1">
              <p contenteditable="true" id="mbwzid">0</p>
              <p>m</p>
              <el-button @click="mbwzF()">目标位置</el-button>
            </div>
            <div class="Operation-Btn">
              <el-button class="Operation-Btn2" size="mini" @click="sdmsqj()">前进</el-button>
              <el-button class="Operation-Btn3" size="mini" @click="sdmsht()">后退</el-button>
            </div>
            <div class="right-bottomBox4" v-if="showButtons">
              <el-button class="btn1" size="mini" @click="fg()">放钩</el-button>
              <el-button class="btn2" size="mini" style="margin-left: 10px" @click="sg()">收钩</el-button>
            </div>
            <div class="Speed-setting1">
              <el-dropdown @command="sdmslb">
                <el-button type="primary" size="min" style="width: 45px;
                                          height: 25px;background: #0F1A43 !important;
                                          border: 2px solid #54619D;
                                          border-radius: 10px;
                                          font-size: 12px;
                                          font-family: Bahnschrift;
                                          font-weight: 400;
                                          color: #C1C1C1;
                                          display: flex;
                                          justify-content: center;
                                          align-items: center;
                                          ">
                  {{ sdmsd }}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="0">0</el-dropdown-item>
                  <el-dropdown-item command="1000">1000</el-dropdown-item>
                  <el-dropdown-item command="2000">2000</el-dropdown-item>
                  <el-dropdown-item command="3000">3000</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <p>r/min</p>
              <el-button plain @click="sdmsdF()">机器人速度</el-button>
            </div>
            <el-button plain class="Manual-btn" @click="sdmsqd()">手动启动</el-button>
          </div>
        </div>

        <!-- 自动模式 -->
        <div class="Automatic-mode">
          <div class="Automatic-title">
            <p>自动模式</p>
            <span></span>
          </div>
          <div class="Automaticbox">
            <div class="Automaticbox1">
              <div class="Automaticbox1-1">
                <el-dropdown @command="zdmslb">
                  <el-button type="primary" size="min" style="width: 45px;
                                          height: 25px;background: #0F1A43 !important;
                                          border: 2px solid #54619D;
                                          border-radius: 10px;
                                          font-size: 12px;
                                          font-family: Bahnschrift;
                                          font-weight: 400;
                                          color: #C1C1C1;
                                          display: flex;
                                          justify-content: center;
                                          align-items: center;
                                          ">
                    {{ zdmsz }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">0</el-dropdown-item>
                    <el-dropdown-item command="1000">1000</el-dropdown-item>
                    <el-dropdown-item command="2000">2000</el-dropdown-item>
                    <el-dropdown-item command="3000">3000</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <p>r/min</p>
              </div>
              <div class="Automaticbox1-2">
                <p contenteditable="true" id="tlsjid">0</p>
                <p>min</p>
              </div>
            </div>
            <div class="Automaticbox2">
              <el-button class="btn1" @click="zdmsdsd()">巡检速度</el-button>
              <el-button class="btn2" @click="tlsj()">停留时间</el-button>
            </div>
            <div class="Automaticbox3">
              <div class="Automaticbox3-1">
                <p contenteditable="true" id="xjdsid">0</p>
                <p>个</p>
              </div>
              <div class="Automaticbox3-2">
                <p contenteditable="true" id="tldwzid">0</p>
                <p>m</p>
              </div>
            </div>
            <div class="Automaticbox4">
              <el-button class="btn1" @click="zxjds()">总巡检点数</el-button>
              <el-button class="btn2" @click="tldsz()">停留点位置</el-button>
            </div>
            <div class="Automaticbox5">
              <el-button class="task" @click="rwbc()">任务保存</el-button>
            </div>
            <div class="Automaticbox6">
              <el-button class="btn1" size="mini" @click="dd()">定点</el-button>
              <el-button class="btn2" size="mini" @click="lx()">连续</el-button>
            </div>
            <div class="Automaticbox7">
              <el-button class="btn" @click="zdmsqd()">自动启动</el-button>
            </div>
          </div>
        </div>

        <!-- 自由模式 -->
        <div class="Free-mode" id="zymsbkid" style="display: none;">
          <p>自由模式</p>
          <span></span>
          <div class="Free-topBox">
            <div class="Free-topBox1">
              <el-dropdown @command="zymslb">
                <el-button type="primary" size="min" style="width: 45px;
                                      height: 25px;background: #0F1A43 !important;
                                      border: 2px solid #54619D;
                                      border-radius: 10px;
                                      font-size: 12px;
                                      font-family: Bahnschrift;
                                      font-weight: 400;
                                      color: #C1C1C1;
                                      display: flex;
                                      justify-content: center;
                                      align-items: center;
                                      ">
                  {{ zymsz }}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="0">0</el-dropdown-item>
                  <el-dropdown-item command="1000">1000</el-dropdown-item>
                  <el-dropdown-item command="2000">2000</el-dropdown-item>
                  <el-dropdown-item command="3000">3000</el-dropdown-item>
                  <el-dropdown-item command="4000">4000</el-dropdown-item>
                  <el-dropdown-item command="5000">5000</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <p>r/min</p>
              <el-button class="btn1" @click="zymsdsd()">巡检速度</el-button>
            </div>
            <div class="Operation-Btn">
              <el-button class="Operation-Btn2" size="mini" @click="zymsqj()">前进</el-button>
              <el-button class="Operation-Btn3" size="mini" @click="zymsht()">后退</el-button>
            </div>
            <div class="right-bottomBox4" v-if="showButtons">
              <el-button class="btn1" size="mini" @click="fg()">放钩</el-button>
              <el-button class="btn2" size="mini" style="margin-left: 10px" @click="sg()">收钩</el-button>
            </div>
            <el-button plain class="Manual-btn" @click="zymsqd()">自由启动</el-button>
          </div>
        </div>

        <!-- 一键返航 -->
        <div class="return">
          <div class="return-title">
            <p>一键返航</p>
            <span></span>
          </div>
          <div style="display:flex;align-items: center;justify-content: center;">
            <div class="return-box" @click="yjfh()">
              <el-button plain class="Manual-btn">一键返航</el-button>
            </div>
            <div class="right-bottomBox4" v-if="showButtons">
              <el-button class="btn1" size="mini" @click="fg()">放钩</el-button>
              <el-button class="btn2" style="margin-left: 10px" size="mini" @click="sg()">收钩</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { listonPageRobotConfig } from "@/api/robot/robotconfig/robotconfig";
import { listsPlc } from "@/api/robot/plc/plc";
import {
  ddspCmd,
  dj1gbCmd,
  dj1kCmd,
  dj2gbCmd,
  dj2kCmd, djsxtzmdgbCmd, djsxtzmdkqCmd,
  fgCmd,
  gdzcdCmd,
  gskslCmd,
  gsslCmd,
  htCmd,
  isadminCmd,
  jqrdataCmd,
  jqrddCmd,
  jqrsdCmd,
  jqrsdzymsCmd,
  lxspCmd,
  mbwzCmd,
  msszCmd,
  qjCmd,
  robotrunCmd,
  robotstopCmd,
  sgCmd,
  sxt1gbCmd,
  sxt1kCmd,
  sxt2gbCmd,
  sxt2kCmd,
  tldszCmd,
  xjrwbcCmd,
  xjsdCmd,
  xjtlsjCmd,
  yjfhCmd,
  zdqdCmd,
  zmd1gbCmd,
  zmd1kqCmd,
  zmd2gbCmd,
  zmd2kqCmd,
  zxjdsCmd,
  zymshtCmd,
  zymsmsszCmd,
  zymsqjCmd,
  zymsrobotrunCmd
} from "@/api/robot/modbus/modbus";
import $ from "jquery";
export default {
  //name:'loginPage',
  data() {
    return {
      robot_name: undefined,//机器人名称
      sdmsd: '1000', //手动模式机器人速度
      zymsz: '1000', //自由模式机器人速度
      zdmsz: '1000', //自动模式机器人速度
      djcz: '打开操作', //打开操作
      sxtcz: '关闭操作', //关闭操作
      //控制点击救援增加的按钮
      showButtons: false,
      //控制机器人的滚动条
      isDologin: false,
      timer: null,//定时器
      gdzcd: '无', //轨道总长度
      jcgssl: '无',//检测格栅孔数量
      mbwz: '无', //目标位置值设定
      jw: '无', //甲烷
      yq: '无',//氧气
      xcsd: '无',//现场湿度
      lhq: '无',//硫化氢
      dczt: '无',//电池状态
      aq: '无',//氨气
      xcwd: '无', //现场温度
      dcdy: '无', //电池电压
      dc1wd: '无',//电池1温度
      fwztm: '无',//复位状态码
      jqgzm: '无',//机器故障码
      dcdl: '无',//电池电量
      gswl: '无', //格栅设定数量
      jqrms: '无',//机器人模式
      dqjcdwz: '无', //当前巡检点位置
      jqrfx: '无', //机器人方向
      djzs: '无', //电机转速
      tsjsxw: '无',//提升装置上限位
      cdzdwxh1: '无', //充电桩机器人到位信号1
      cdzdwxh2: '无', //充电桩机器人到位信号2
      tsjjqrdwxh1: '无', //提升装置到位信号1
      tsjjqrdwxh2: '无', //提升装置到位信号2
      zgdwxh: '无', //变轨装置直轨到位信号
      wgdwxh: '无', //变轨装置弯轨到位信号
      tsjssux: '无',//提升机上升运行
      tsjssdw1: '无',//提升装置轨道到位1（上升到位）
      tsjxjdw2: '无',//提升装置轨道到位2（下降到位）
      tsjxjyx: '无',//提升机下降运行
      djwd: '无',//电机温度
      jqrsd: '无',//机器人速度设定
      ddmkdw: '无',//电动门开到位
      ddmgdw: '无',//电动门关到位
      sswy: '无',//实时位移
      yxd: '无',//运行灯
      dj1: '无',//1#电机
      dj2: '无',//2#电机
      sxt1: '无',//1#摄像头
      sxt2: '无',//2#摄像头
      zmd1: '无',//照明灯1
      zmd2: '无',//照明灯2
      //机器人列表
      robotList: [],
      //plc列表
      plcList: [],
      queryParams: {
        robot_name: undefined //机器人名称
      },queryParams1: {
        robot_config_id: undefined
      },queryParams2: {
        robotid: undefined
      },//查询参数
      queryparms3: {
        robotid: undefined,
        robot_id: undefined,
        valu: undefined,
      }
    }
  },
  created() {
    //初始化页面加载方法
    this.getList();//机器人列表
    this.getplcs();//根据机器人id查询plc列表
   // this.getISadmin();//当前用户是否管理员
  },
  mounted() {
    //加载完页面加载方法
    //机器人标题
    $("#robotitle").text(localStorage.getItem("robot_name") == null?"机器人面板":localStorage.getItem("robot_name")+"面板");
    //是否显示脱钩、放钩按钮
    localStorage.getItem("robotype") === '1' ? this.showButtons = true : this.showButtons = false;
    this.timer = setInterval(() => {
      //定时轮询执行
      this.getList(); //机器人列表
      this.getplcs();//根据机器人id查询plc列表
      this.readata();//实时数据
      console.log("机器人控制面板定时")
    }, 2000);//2秒
  },
  beforeDestroy() { //清除定时器
    if (this.timer) {
      clearInterval(this.timer); //关闭
    }
  },
  methods: {
    //选中当前机器人
    handleSelectionChange(row) {
      localStorage.removeItem("robot_config_id");//删除机器人id
      localStorage.removeItem("robot_name");//删除机器人名称
      localStorage.removeItem("video_ip1");//删除1视频ip
      localStorage.removeItem("video_port1");//删除1视频端口号
      localStorage.removeItem("video_name1");//删除1视频账号
      localStorage.removeItem("video_pwd1");//删除1视频密码
      localStorage.removeItem("video_ip2");//删除2视频ip
      localStorage.removeItem("video_port2");//删除2视频端口号
      localStorage.removeItem("video_name2");//删除2视频账号
      localStorage.removeItem("video_pwd2");//删除2视频密码
      localStorage.removeItem("robotype");//删除机器人类型
      localStorage.removeItem("camera_type");//删除摄像头类型
      localStorage.setItem("video_ip1", row.video_ip1);//存储值
      localStorage.setItem("video_port1", row.video_port1);//存储值
      localStorage.setItem("video_name1", row.video_name1);//存储值
      localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
      localStorage.setItem("video_ip2", row.video_ip2);//存储值
      localStorage.setItem("video_port2", row.video_port2);//存储值
      localStorage.setItem("video_name2", row.video_name2);//存储值
      localStorage.setItem("video_pwd2", row.video_pwd2);//存储值
      localStorage.setItem("robot_name", row.robot_name);//存储值
      localStorage.setItem("robot_config_id", row.id);//存储值
      localStorage.setItem("robotype", row.robot_type);//存储值
      localStorage.setItem("camera_type", row.camera_type);//存储值
      $("#robotitle").text(localStorage.getItem("robot_name") + "面板");//机器人名称标题
      localStorage.getItem("robotype") === '1' ? this.showButtons = true : this.showButtons = false;//是否显示脱钩、放钩按钮
      this.getplcs();//根据机器人id查询plc列表
    },//机器人id查询plc列表
    getplcs() {
      this.queryParams1.robot_config_id = localStorage.getItem("robot_config_id");
      listsPlc(this.queryParams1).then(response => {
        this.plcList = response.rows;
      });
    },//当前机器人数据
    readata() {
      this.queryParams2.robotid = localStorage.getItem("robot_config_id");
      jqrdataCmd(this.queryParams2).then(response => {
        if (typeof response.data != "undefined" && response.data != null) {
          this.gdzcd =response.data.gdzcd + "m";//轨道总长度
          this.jcgssl =response.data.jcgssl; //检测格栅孔数量
          this.mbwz = response.data.mbwz * 100 + "m"; //目标位置值设定
          this.jw = response.data.jw; //甲烷
          this.yq = response.data.yq+ "%"; //氧气
          this.xcsd = response.data.xcsd; //现场湿度
          this.lhq = response.data.lhq; //硫化氢
          this.dczt = response.data.dczt; //电池状态
          this.aq = response.data.aq; //氨气
          this.xcwd =response.data.xcwd + "°C"; //现场温度
          this.dcdy =response.data.dcdy ; //电池电压
          this.dc1wd = response.data.dc1wd + "°C"; //电池1温度
          this.dcdl = response.data.dcdl; //电池电量
          this.gswl = response.data.gswl;//格栅设定数量
          this.jqrms = response.data.jqrms; //机器人模式
          this.dqjcdwz = response.data.dqjcdwz; //当前巡检点位置
          this.jqrfx = response.data.jqrfx; //机器人方向
          this.djzs = response.data.djzs; //电机转速
          this.tsjsxw = response.data.tsjsxw; //提升装置上限位
          this.cdzdwxh1 = response.data.cdzdwxh1; //充电桩机器人到位信号1
          this.cdzdwxh2 = response.data.cdzdwxh2; //充电桩机器人到位信号2
          this.tsjjqrdwxh1 = response.data.tsjjqrdwxh1; //提升装置到位信号1
          this.tsjjqrdwxh2 = response.data.tsjjqrdwxh2; //提升装置到位信号2
          this.zgdwxh = response.data.zgdwxh; //变轨装置直轨到位信号
          this.wgdwxh = response.data.wgdwxh; //变轨装置弯轨到位信号
          this.tsjssux = response.data.tsjssux;//提升机上升运行
          this.tsjssdw1 = response.data.tsjssdw1;//提升装置轨道到位1（上升到位）
          this.tsjxjdw2 = response.data.tsjxjdw2;//提升装置轨道到位2（下降到位）
          this.tsjxjyx = response.data.tsjxjyx;//提升机下降运行
          this.djwd = response.data.djwd;//电机温度
          this.jqrsd =response.data.jqrsd;//机器人速度设定
          this.ddmkdw = response.data.ddmkdw;//电动门开到位
          this.ddmgdw = response.data.ddmgdw;//电动门关到位
          this.sswy = response.data.sswy + "m";//实时位移
          this.yxd = response.data.yxd;//运行灯
          this.dj1 = response.data.dj1;//电机1
          this.dj2 = response.data.dj2;//电机2
          this.sxt1 = response.data.sxt1;//摄像头1
          this.sxt2 = response.data.sxt2;//摄像头2
          this.zmd1 = response.data.zmd1;//照明灯1
          this.zmd2 = response.data.zmd2;//照明灯2
        } else {
          this.gdzcd = "无";//轨道总长度
          this.jcgssl = "无"; //检测格栅孔数量
          this.mbwz = "无"; //目标位置值设定
          this.jw = "无"; //甲烷
          this.yq = "无"; //氧气
          this.xcsd = "无"; //现场湿度
          this.lhq = "无"; //硫化氢
          this.dczt = "无"; //电池状态
          this.aq = "无"; //氨气
          this.xcwd = "无"; //现场温度
          this.dcdy = "无"; //电池电压
          this.dc1wd = "无"; //电池1温度
          this.dcdl = "无"; //电池电量
          this.gswl = "无";//格栅设定数量
          this.jqrms = "无"; //机器人模式
          this.dqjcdwz = "无"; //当前巡检点位置
          this.jqrfx = "无"; //机器人方向
          this.djzs = "无"; //电机转速
          this.tsjsxw = "无"; //提升装置上限位
          this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
          this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
          this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
          this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
          this.zgdwxh = "无"; //变轨装置直轨到位信号
          this.wgdwxh = "无"; //变轨装置弯轨到位信号
          this.tsjssux = "无";//提升机上升运行
          this.tsjssdw1 = "无";//提升装置轨道到位1（上升到位）
          this.tsjxjdw2 = "无";//提升装置轨道到位2（下降到位）
          this.tsjxjyx = "无";//提升机下降运行
          this.djwd = "无";//电机温度
          this.jqrsd = "无";//机器人速度设定
          this.ddmkdw = "无";//电动门开到位
          this.ddmgdw = "无";//电动门关到位
          this.sswy = "无";//实时位移
          this.yxd = "无";//运行灯
          this.dj1 = "无";//电机1
          this.dj2 = "无";//电机2
          this.sxt1 = "无";//摄像头1
          this.sxt2 = "无";//摄像头2
          this.zmd1 = "无";//照明灯1
          this.zmd2 = "无";//照明灯2
        }
      });
    },//根据输入框机器人名称，查询机器人列表
    getRobotName(robot_name) {
      this.queryParams.robot_name = robot_name;
      this.getList();
    },//查询机器人列表
    getList() {
      this.loading = true;
      listonPageRobotConfig(this.queryParams).then(response => {
        this.robotList = response.rows;
        this.loading = false;
      });
    },//格栅设定数量
    gszlsz() {
      this.queryparms3.valu = $("#gsslid").text();
      console.log("轨道总长度设定设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        gsslCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("轨道总长度设定设置不能为空")
      }
    },//检测格栅孔数量
    gsks() {
      this.queryparms3.valu = $("#gsksid").text();
      console.log("检测格栅孔数量" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        gskslCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("检测格栅孔数量不能为空")
      }
    },//手动模式(启动)
    sdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotrunCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//机器人 (暂停)
    jqrzt() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotstopCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//机器人自由模式设置
    jqrzymsF(jqrms) {
      this.queryparms3.valu = jqrms
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymsmsszCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    },//机器人模式设置
    jqrmsF(jqrms) {
      this.queryparms3.valu = jqrms
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        msszCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    },//目标位置
    mbwzF() {
      this.queryparms3.valu = $("#mbwzid").text();
      console.log("目标位置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        mbwzCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("目标位置不能为空")
      }
    },//手动模式前进
    sdmsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      qjCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动模式后退
    sdmsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      htCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动模式速度设置
    sdmsdF() {
      this.queryparms3.valu = this.sdmsd;
      console.log("手动模式速度设置" + this.sdmsd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("手动模式速度设置不能为空")
      }
    },//巡检点停留间隔时间
    tlsj() {
      this.queryparms3.valu = $("#tlsjid").text();
      if (this.queryparms3.valu != "") {
        console.log("停留间隔时间" + this.queryparms3.valu);
        this.queryparms3.robotid = localStorage.getItem("robot_config_id")
        xjtlsjCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("停留间隔时间不能为空")
      }
    },//巡检任务保存
    rwbc() {
      console.log("巡检任务保存");
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      xjrwbcCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//总巡检点数
    zxjds() {
      this.queryparms3.valu = $("#xjdsid").text();
      console.log("总巡检点数" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zxjdsCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("停留间隔时间不能为空")
      }
    },//停留点位置
    tldsz() {
      this.queryparms3.valu = $("#tldwzid").text();
      console.log("停留点位置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        tldszCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("停留点位置不能为空")
      }
    },//自由模式(启动)
    zymsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsrobotrunCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//定点视频
    dd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      ddspCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//连续视频
    lx() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      lxspCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//放钩
    fg() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      fgCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//收钩
    sg() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      sgCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自动模式(启动)
    zdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zdqdCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//轨道总长度设定设置
    zcdsz() {
      this.queryparms3.valu = $("#zcdid").text();
      console.log("轨道总长度设定设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        gdzcdCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("轨道总长度设定设置不能为空")
      }
    },//自由模式前进
    zymsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsqjCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式后退
    zymsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymshtCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//机器人断电
    jqrdd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      jqrddCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式速度设置
    zymsdsd() {
      this.queryparms3.valu = this.zymsz;
      console.log("自由模式速度设置" + this.zymsz);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdzymsCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自由模式速度设置不能为空")
      }
    },//一键返航
    yjfh() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      yjfhCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自动模式速度设置
    zdmsdsd() {
      this.queryparms3.valu = this.zdmsz;
      console.log("自动模式速度设置" + this.zdmsz);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        xjsdCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自动模式速度设置不能为空")
      }
    },
    sdmslb(sdmsd) {
      this.sdmsd = sdmsd; // 手动模式速度列表
    },
    zymslb(zymsz) {
      this.zymsz = zymsz; // 自由模式速度列表
    },
    zdmslb(zdmsz) {
      this.zdmsz = zdmsz; // 自动模式速度列表
    },
    //点击左侧第一个列表中的救援增加两个按钮
    handleJyClick() {
      this.showButtons = true
    },
    //点击左侧第一个列表中的普通隐藏两个按钮
    handlePtClick() {
      this.showButtons = false
    }, //打开操作
    djzcfun(djcz) {
      this.djcz = djcz;
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      if (this.djcz == '打开设备'||this.djcz == '打开操作') {
        djsxtzmdkqCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }
    },//关闭操作
    sxtczfun(sxtcz) {
      this.sxtcz = sxtcz;
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      if (this.sxtcz == '关闭设备'||this.sxtcz == '关闭操作') {
        djsxtzmdgbCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }
    }
  },enter() {
    this.isDologin = true;
  },leave() {
    this.isDologin = false;
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  //padding: 0;
}
.el-button+.el-button {
  margin-left: 0px;
}
.app-container {
  width: 100%;
  height: calc(100vh - 35px);
  display: flex;
  background-color: #081a46;
}
.left {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  .put {
    width: 98%;
    margin: 10px;
    ::v-deep .el-input {
      width: 100%;
      height: 20px;
    }
    ::v-deep .el-input__inner {
      border: 2px solid #0264bf;
      background-color: #081a46;
      // margin: 10px;
    }
  }
  .table {
    width: 98%;
    height: 200px;
    margin: 10px;
    // margin-top: 20px;
    overflow: auto;
    ::v-deep .el-table__body-wrapper {
      &::-webkit-scrollbar {
        // 整个滚动条
        width: 0px; // 纵向滚动条的宽度
        background: rgba(71, 103, 182, 0.3);
        border: none;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道
        border: none;
      }
    }
    .el-table {
      width: 100%;
    }
    ::v-deep .el-table th.gutter {
      display: none;
      width: 0
    }
    ::v-deep .el-table colgroup col[name='gutter'] {
      display: none;
      width: 0;
    }
    // ::deep .el-table::before {
    //     height: 0px;
    // }
    ::v-deep .el-table__body {
      width: 100%;
      // padding-left: 10px;
    }
    ::v-deep .el-table__body-wrapper {
      width: 100%;
      background-color: #081a46;
    }
    /*滚动条的宽度*/
    .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: none;
      width: 0;
    }
    .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: block;
      width: 0;
    }
    ::v-deep .el-table tr {
      background-color: transparent;
      border: none;
      // height: 50px;
      width: 100%;
      background-color: #081a46;
    }
    ::v-deep .el-table td {
      background-color: trannt;
      border: none;
      width: 100%;
      // height: 50px;
      background-color: #081a46;
    }
    // /* 表格内背景颜色 */
    ::v-deep .el-table th {
      background-color: transparent;
      border: none;
      width: 100%;
    }
    // 移入变色
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: #222448;
    }
  }
  ::v-deep.el-progress-bar__inner {
    background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
  }
  .table::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
  }
  .table-bottom {
    width: 98%;
    height: 200px;
    margin: 10px;
    // margin-top: 20px;
    overflow: auto;
    ::v-deep .el-table__body-wrapper {
      &::-webkit-scrollbar {
        // 整个滚动条
        width: 0px; // 纵向滚动条的宽度
        background: rgba(71, 103, 182, 0.3);
        border: none;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道
        border: none;
      }
    }
    .el-table {
      width: 100%;
    }
    ::v-deep .el-table th.gutter {
      display: none;
      width: 0
    }
    ::v-deep .el-table colgroup col[name='gutter'] {
      display: none;
      width: 0;
    }
    // ::deep .el-table::before {
    //     height: 0px;
    // }
    ::v-deep .el-table__body {
      width: 100%;
      background-color: #081a46;
      // padding-left: 10px;
    }
    ::v-deep .el-table__body-wrapper {
      width: 100%;
      background-color: #081a46;
    }
    /*滚动条的宽度*/
    .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: none;
      width: 0;
    }
    .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: block;
      width: 0;
    }
    ::v-deep .el-table tr {
      //background-color: transparent;
      border: none;
      // height: 50px;
      width: 100%;
      background-color: #081a46;
    }
    ::v-deep .el-table td {
      //background-color: trannt;
      border: none;
      width: 100%;
      // height: 50px;
      background-color: #081a46;
    }
    // /* 表格内背景颜色 */
    ::v-deep .el-table th {
      background-color: transparent;
      border: none;
      width: 100%;
    }
    // 移入变色
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: #222448;
    }
  }
}
.right {
  width: 79%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.right-robot {
  width: 98%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  //background-color:#151F49;
  background-color: #081a46;
  border: 1px solid #383D5C;
  border-radius: 4px;
  border-top: none;
  p {
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #E9E9E9;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.right-bottom {
  margin-top: 0.5%;
  width: 98%;
  height: 100%;
  border: 1px solid #262e63;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  //align-items: center;
  //justify-content: center;
  background-color: #081a46;
}
//显示参数
.right-center1 {
  width: 100%;
  height: 35%;
  border-bottom: 1px solid #262E63;
  border-radius: 4px;
  >p {
    width: 86px;
    height: 18px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #EDEDED;
    margin-left: 2%;
  }
  span {
    width: 48px;
    height: 2px;
    margin-left: 2%;
    display: block;
    background: #4691FF;
    border-radius: 2px;
  }
  .right-conter {
    width: 98%;
    height: 80%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    //align-items: center;
    //background-color: #065D70;
    .centerBox {
      .centerBox1 {
        width: 148px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 2%;
        //background-color: #e0b1e4;
        p:nth-child(1) {
          margin-top: 10px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          width: 125px;
          height: 17px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }
        p:nth-child(2) {
          width: 70px;
          height: 24px;
          margin-left: 2%;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #75bfff;
        }
      }
    }
  }
}
//公共操作
.Common-operation {
  width: 100%;
  height: 18%;
  border-bottom: 1px solid #262E63;
  >p {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #EDEDED;
    margin-left: 2%;
  }
  span {
    display: block;
    margin-left: 5px;
    width: 45px;
    height: 2px;
    background: #4691FF;
    border-radius: 2px;
    margin-left: 2.5%;
  }
  div {
    .Common-topBox {
      width: 98%;
      margin-top: 1%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      //background-color: #2ec7a1;
      .Common-topBox1 {
        width: 20%;
        display: flex;
        align-items: center;
        p:nth-child(1) {
          width: 50px;
          height: 22px;
          font-size: 12px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        p:nth-child(2) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-top: 3px;
          margin-left: 2px;
        }
        :nth-child(3) {
          width: 60px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #595E7B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          background-color: #151F49;
          margin-left: 2%;
        }
      }
      .Common-topBox2 {
        width: 20%;
        display: flex;
        align-items: center;
        p:nth-child(1) {
          width: 50px;
          height: 22px;
          font-size: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1
        }
        p:nth-child(2) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-top: 3px;
          margin-left: 2px;
        }
        :nth-child(3) {
          width: 60px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #595E7B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          background-color: #151F49;
          margin-left: 2%;
        }
      }
      .Common-topBox3 {
        display: flex;
        align-items: center;
        width: 20%;
        p:nth-child(1) {
          width: 50px;
          height: 22px;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1
        }
        p:nth-child(2) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-top: 3px;
          margin-left: 2px;
        }
        :nth-child(3) {
          width: 60px;
          height: 25px;
          border: 1px solid #595E7B;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          background-color: #151F49;
          margin-left: 2%;
        }
      }
      .robotStop {
        width: 80px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #673B1B);
        border: 2px solid #9B6D2B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #EDEDED;
      }
      .robotStop1 {
        width: 80px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #4C0820, #0D1538);
        border: 2px solid #942028;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #EDEDED;
      }
    }
    .Common-botmBox {
      margin-top: 0.5%;
      //margin-bottom: 10px;
      display: flex;
      align-items: center;
      //background-color: #3CA813;
      .Common-botmBox1 {
        width: 8%;
        margin-left: 3%;
        p:nth-child(1) {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
        }
        p:nth-child(2) {
          margin-left: 1%;
          width: 25px;
          height: 2px;
          background: #4691FF;
        }
      }
      .Operation-buttonBox {
        width: 12%;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        :nth-child(2) {
          width: 25px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(68deg, #3040F4, #3F79F4);
          border-width: 0px;
        }
        :nth-child(1) {
          width: 50px;
          height: 16px;
          text-align: center;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
        }
      }
      .Operation-buttonBox1 {
        width: 12%;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        :nth-child(2) {
          width: 25px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(68deg, #3040F4, #3F79F4);
          border-width: 0px;
        }
        :nth-child(1) {
          height: 16px;
          text-align: center;
          font-size: 10px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
        }
      }
    }
  }
}
//手动模式
.Manual-mode {
  width: 100%;
  height: 12%;
  border-bottom: 1px solid #262e63;
  >p {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #EDEDED;
    margin-left: 2%;
  }
  span {
    display: block;
    margin-left: 5px;
    width: 45px;
    height: 2px;
    background: #4691FF;
    border-radius: 2px;
    margin-bottom: 0.5%;
    margin-left: 2.5%;
  }
  .Manual-topBox {
    width: 90%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    //background-color: #4691FF;
    .Manual-topBox1 {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: -2.5%;
      p:nth-child(1) {
        width: 50px;
        height: 22px;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0F1A43;
        border: 2px solid #54619D;
        border-radius: 10px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1
      }
      p:nth-child(2) {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
        margin-top: 3px;
        margin-left: 5px;
      }
      :nth-child(3) {
        width: 60px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #595E7B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
        background-color: #151F49;
      }
    }
    .Operation-Btn {
      display: flex;
    }
    .Operation-Btn2 {
      width: 60px;
      height: 25px;
      border: none;
      border-radius: 5px;
      background: linear-gradient(0deg, #0D1538, #065D70);
      border: 2px solid #108B8F;
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #C1C1C1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .Operation-Btn3 {
      width: 60px;
      height: 25px;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      background: linear-gradient(0deg, #4C0820, #0D1538);
      border: 2px solid #942028;
      margin-left: 5%;
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #C1C1C1
    }
    //点击救援添加的按钮
    .right-bottomBox4 {
      width: 14%;
      height: 12%;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      //background-color: #d4f283;
      .btn1 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #121452, #0d4e81);
        border: 2px solid #183b84;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
      .btn2 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #116f7b);
        border: 2px solid #0d367b;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }
    .Speed-setting1 {
      width: 20%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      :nth-child(3) {
        width: 70px;
        height: 25px;
        border: 1px solid #595E7B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        margin-left: 1%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .Speed-setting1>p {
      margin-left: 3px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #EDEDED;
    }
    .Manual-btn {
      width: 80px;
      height: 25px;
      border: 1px solid #595E7B;
      border-radius: 4px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #EDEDED;
      background: linear-gradient(0deg, #0D1538, #1B2D67);
      border: 2px solid #2B5B9B;
      border-radius: 4px;
      // margin-left: 9%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
//自动模式
.Automatic-mode {
  width: 100%;
  height: 18%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #262E63;
  .Automatic-title {
    width: 98%;
    height: 20%;
    >p {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #EDEDED;
      margin-left: 2%;
    }
    span {
      display: block;
      width: 40px;
      height: 2px;
      background: #4691FF;
      border-radius: 2px;
      margin-bottom: 0.5%;
      margin-left: 3%;
    }
  }
  .Automaticbox {
    width: 98%;
    height: 76%;
    display: flex;
    justify-content: space-around;
    .Automaticbox1 {
      width: 10%;
      height: 98%;
      margin-top: 0.5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      //background-color: #2ec7a1;
      .Automaticbox1-1 {
        display: flex;
        margin-bottom: 3%;
        p {
          width: 32px;
          height: 14px;
          margin-top: 6px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-left: 1%;
        }
      }
      .Automaticbox1-2 {
        display: flex;
        p:nth-child(1) {
          width: 50px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        p:nth-child(2) {
          width: 28px;
          height: 14px;
          margin-top: 6px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-left: 1%;
        }
      }
    }
    .Automaticbox2 {
      width: 8%;
      height: 98%;
      margin-left: -6%;
      margin-top: 0.5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .btn1 {
        width: 70px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
        margin-bottom: 3%;
      }
      .btn2 {
        width: 70px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED
      }
    }
    .Automaticbox3 {
      width: 10%;
      height: 98%;
      margin-top: 0.5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .Automaticbox3-1 {
        display: flex;
        margin-bottom: 3%;
        p:nth-child(1) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        p:nth-child(2) {
          //width: 28px;
          height: 14px;
          margin-top: 6px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-left: 1%;
        }
      }
      .Automaticbox3-2 {
        display: flex;
        p:nth-child(1) {
          width: 60px;
          height: 25px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        p:nth-child(2) {
          // width: 28px;
          height: 14px;
          margin-top: 6px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-left: 1%;
        }
      }
    }
    .Automaticbox4 {
      width: 10%;
      height: 98%;
      margin-left: -6%;
      margin-top: 0.5%;
      display: flex;
      flex-direction: column;
      //align-items: center;
      justify-content: center;
      //background-color: #2ec7a1;
      .btn1 {
        width: 70px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
        margin-bottom: 3%;
      }
      .btn2 {
        width: 70px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED
      }
    }
    .Automaticbox5 {
      width: 10%;
      height: 60%;
      margin-top: 0.5%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      //background-color: #2ec7a1;
      //justify-content: center;
      .task {
        width: 70px;
        height: 25px;
        margin-top: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #673B1B);
        border: 2px solid #9B6D2B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }
    }
    .Automaticbox6 {
      width: 15%;
      height: 60%;
      margin-top: 0.5%;
      display: flex;
      //flex-direction: column;
      align-items: center;
      justify-content: center;
      //background-color: #2ec7a1;
      .btn1 {
        width: 60px;
        height: 25px;
        margin-top: 5px;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #EDEDED;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5%;
      }
      .btn2 {
        width: 60px;
        height: 25px;
        margin-top: 5px;
        background: linear-gradient(0deg, #0D1538, #065D70);
        border: 2px solid #108B8F;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #EDEDED;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .Automaticbox7 {
      width: 10%;
      height: 60%;
      margin-top: 0.5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .btn {
        width: 80px;
        height: 25px;
        margin-top: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #EDEDED;
      }
    }
  }
}
//自由模式
.Free-mode {
  width: 100%;
  height: 12%;
  border-bottom: 1px solid #262E63;
  >p {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #EDEDED;
    margin-left: 2%;
  }
  span {
    display: block;
    margin-left: 5px;
    width: 45px;
    height: 2px;
    background: #4691FF;
    border-radius: 2px;
    margin-bottom: 0.5%;
    margin-left: 2.5%;
  }
  .Free-topBox {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .Free-topBox1 {
      width: 15%;
      margin-left: -2%;
      display: flex;
      justify-content: space-around;
      p:nth-child(1) {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0F1A43;
        border: 2px solid #54619D;
        border-radius: 10px;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1
      }
      p:nth-child(2) {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
        margin-top: 3px;
        //margin-left: -2%;
      }
      .btn1 {
        width: 70px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
        margin-bottom: 3%;
      }
    }
    .Operation-Btn {
      display: flex;
      margin-left: 6%;
    }
    .Operation-Btn2 {
      width: 60px;
      height: 25px;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      background: linear-gradient(0deg, #0D1538, #065D70);
      border: 2px solid #108B8F;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #EDEDED;
    }
    .Operation-Btn3 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 25px;
      border: none;
      border-radius: 5px;
      background: linear-gradient(0deg, #4C0820, #0D1538);
      border: 2px solid #942028;
      margin-left: 4%;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #EDEDED;
    }
    //点击救援添加的按钮
    .right-bottomBox4 {
      width: 12%;
      height: 12%;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      //background-color: #d4f283;
      .btn1 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #121452, #0d4e81);
        border: 2px solid #183b84;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
      .btn2 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #116f7b);
        border: 2px solid #0d367b;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
        margin-left: 2px;
      }
    }
    .Manual-btn {
      width: 80px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #595E7B;
      border-radius: 4px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #EDEDED;
      background: linear-gradient(0deg, #0D1538, #1B2D67);
      border: 2px solid #2B5B9B;
      border-radius: 4px;
      margin-left: 3%;
    }
  }
}
//一键返航
.return {
  width: 100%;
  height: 10%;
  //background-color: #d4f283;
  .return-title {
    width: 98%;
    height: 40%;
    // background-color: #0264bf;
    >p {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #EDEDED;
      margin-left: 20px;
    }
    span {
      display: block;
      margin-left: 5px;
      width: 45px;
      height: 2px;
      background: #4691FF;
      border-radius: 2px;
      //margin-bottom: 0.5%;
      margin-left: 2.5%;
    }
  }
  .return-box {
    width: 15%;
    height: 60%;
    display: flex;
    align-items: center;
    //background-color: #0D817A;
    .Manual-btn {
      width: 90px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #595E7B;
      border-radius: 4px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #EDEDED;
      background: linear-gradient(0deg, #0D1538, #1B2D67);
      border: 2px solid #2B5B9B;
      border-radius: 4px;
      //margin-left: 50%;
    }
  }
  //点击救援添加的按钮
  .right-bottomBox4 {
    width: 15%;
    height: 60%;
    display: flex;
    //background-color: #12c571;
    .btn1 {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(0deg, #121452, #0d4e81);
      border: 2px solid #183b84;
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #C1C1C1;
    }
    .btn2 {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(0deg, #0D1538, #116f7b);
      border: 2px solid #0d367b;
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #C1C1C1;
      margin-left: 2px;
    }
  }
}
</style>
